<template lang="pug">
  el-dropdown(trigger="hover")
    a.positinBtn(href="javascript: void(0)")
      | {{curArea.areaName}}
      img(src="@/assets/caret-bottom.png")
    el-dropdown-menu(slot="dropdown")
      el-dropdown-item(v-for="area in areaList" :key="area.areaId" class="f13" @click.native="() => handleCommand(area)") {{area.areaName}}
  //- el-drawer(
  //-   :visible.sync="visibleDialog"
  //-   custom-class="commonDrawer"
  //-   title="切换园区"
  //-   direction="rtl"
  //-   append-to-body
  //-   destroy-on-close
  //-   modal-append-to-body
  //-   @click="$_handleCancel"
  //- )
  //-   .drawer-content
  //-     p.position(v-for="area in areaList" :key="area.areaId" class="f13" @click="() => handleCommand(area)")
  //-       | {{ area.areaName }}
</template>
<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters(['areaList', 'curArea'])
  },
  methods: {
    ...mapActions({
      'setStaffArea': 'user/setStaffArea'
    }),
    handleCommand (area) {
      console.log(area)
      if (area.areaId !== this.curArea.areaId) {
        this.setStaffArea({ areaId: area.areaId })
      }
      // this.$_handleCancel()
    }
  }
}
</script>
<style lang="scss" scoped>
.positinBtn{
  display: inline-block;
  cursor: pointer;
  height: 40px;
  background: #EEF1F4;
  border-radius: 26px;
  padding: 0 20px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #000;
  white-space: nowrap;
  margin-right: 64px;

  i {
    color: #333333;
    font-size: 14px;
    margin-left: 5px;
  }

  &:hover{
    background: $--border-color-extra-light;
  }
  img{
    margin-left: 15px;
  }
}
</style>
